<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>九宫格字母游戏</title>
    <style>
        #grid {
            display: grid;
            grid-template-columns: repeat(3, 50px);
            grid-template-rows: repeat(3, 50px);
            gap: 5px;
            margin: 20px;
        }

        .cell {
            border: 1px solid black;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
        }

        button {
            margin: 10px;
            padding: 10px 20px;
            font-size: 16px;
        }

        #status {
            margin: 10px;
        }

        /* 闪烁特效的样式类 */
        .blink {
            animation: blinkEffect 0.5s ease-in-out;
        }

        @keyframes blinkEffect {
            0% {
                opacity: 1;
            }

            50% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }
    </style>
</head>

<body>
<label for="luckyLetter">选择幸运字母：</label>
<input type="text" id="luckyLetter" maxlength="1">
<button onclick="startGame()">开始游戏</button>
<div id="grid">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
</div>
<button onclick="fillAllAndClear()" id="fillButton">填充并消除</button>
<div id="status"></div>

<script>
    let grid;
    let cells;
    let letters = ['A', 'B', 'C', 'D', 'E', 'F'];
    let luckyLetter;
    let fillCount = 20;
    let score = 0;

    function startGame() {
        luckyLetter = document.getElementById('luckyLetter').value.toUpperCase();
        if (!letters.includes(luckyLetter)) {
            alert('请输入有效的字母');
            return;
        }
        grid = document.getElementById('grid');
        cells = Array.from(grid.querySelectorAll('.cell'));
        document.getElementById('fillButton').disabled = false;
        updateStatus();
    }

    function fillAllAndClear() {
        if (fillCount <= 0) {
            endGame();
            return;
        }

        let filledCount = 0;
        // 填充所有空的九宫格，但受剩余填充次数限制
        for (let i = 0; i < cells.length && filledCount < fillCount; i++) {
            if (cells[i].textContent === '') {
                let randomLetterIndex = Math.floor(Math.random() * letters.length);
                let randomLetter = letters[randomLetterIndex];
                cells[i].textContent = randomLetter;
                filledCount++;
                if (randomLetter === luckyLetter) {
                    fillCount++;
                }
            }
        }

        fillCount -= filledCount;
        // 延迟一秒后执行消除操作
        setTimeout(checkAndClear, 1000);
        updateStatus();
    }

    function checkAndClear() {
        let pairsCleared = 0;
        let rowsCleared = 0;

        // 检查同行同字母
        for (let row = 0; row < 3; row++) {
            let rowLetters = [];
            for (let col = 0; col < 3; col++) {
                let cellIndex = row * 3 + col;
                rowLetters.push(cells[cellIndex].textContent);
            }
            if (rowLetters.every(l => l === rowLetters[0] && l!== '')) {
                rowsCleared++;
                for (let col = 0; col < 3; col++) {
                    let cellIndex = row * 3 + col;
                    cells[cellIndex].textContent = '';
                    cells[cellIndex].classList.add('blink');
                }
            }
        }

        // 检查相同字母消除
        for (let i = 0; i < cells.length; i++) {
            for (let j = i + 1; j < cells.length; j++) {
                if (cells[i].textContent === cells[j].textContent && cells[i].textContent!== '') {
                    pairsCleared++;
                    cells[i].textContent = '';
                    cells[j].textContent = '';
                    cells[i].classList.add('blink');
                    cells[j].classList.add('blink');
                }
            }
        }

        score += pairsCleared + rowsCleared * 3;
        fillCount += pairsCleared + rowsCleared * 3;
        updateStatus();
    }

    function endGame() {
        document.getElementById('fillButton').disabled = true;
        alert(`游戏结束！得分：${score}`);
    }

    function updateStatus() {
        document.getElementById('status').innerHTML = `填充次数：${fillCount}  得分：${score}`;
    }
</script>
</body>

</html>